<template>
  <div class="main_box" style="padding:10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ dataInfo.name }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info1">
          <el-row class="header-info">
            <el-col class="text-info">
              <el-col>
                <el-col>打印机编号:</el-col>
                <el-col>{{ dataInfo.sn }}</el-col>
              </el-col>
              <el-col>
                <el-col>打印机状态:</el-col>
                <el-col>
                  {{ formatPrinterState(dataInfo.printerState) }}
                </el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="基本信息" name="userInfo">
          <el-form>
            <el-row>
              <el-form-item label="设备类型:">
                <span>{{ dataInfo.printerType == 1 ? '商户' : '平台' }}</span>
              </el-form-item>
              <el-form-item label="打印机版本:">
                <span>{{ dataInfo.printerVersion == 1 ? 'wifi版' : '4G版' }}</span>
              </el-form-item>
              <el-form-item label="设备密钥:">
                <span>{{ dataInfo.printerKey }}</span>
              </el-form-item>
              <el-form-item label="商户:">
                <span>{{ dataInfo.businessName }}</span>
              </el-form-item>
              <el-form-item label="时间点:">
                <span>{{ dataInfo.timePoints }}</span>
              </el-form-item>
              <el-form-item label="特殊内容标识:">
                <span>{{ dataInfo.contentFlag == 1 ? '呼叫器首单' : '' }}</span>
              </el-form-item>
              <el-form-item label="物联网卡号:">
                <span>{{ dataInfo.iccid }}</span>
              </el-form-item>
              <el-form-item label="设备激活日期-流量截止日期">
                <span>
                  {{ dataInfo.activeDate }} - {{ dataInfo.flowEndDate }}
                </span>
              </el-form-item>
              <el-form-item label="创建人:">
                <span>{{ dataInfo.createUserName }}</span>
              </el-form-item>
              <el-form-item label="修改人:">
                <span>{{ dataInfo.modifyUserName }}</span>
              </el-form-item>
              <el-form-item label="修改时间:">
                <span>{{ dataInfo.modifyDate }}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="关联商户" name="relationBusiness">
          <el-table :data="dataInfo.list || []" style="width:fit-content">
            <el-table-column label="商户" prop="businessName" width="200" align="center">

            </el-table-column>
            <el-table-column label="部门" width="300" align="center">
              <template slot-scope="scope">
                <span>
                  {{ formatDepartName(scope.row.departId) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import PrinterApi from '@/api/equip/printer';
import DepartApi from "@/api/business/depart"
export default {
  data() {
    return {
      dataInfo: {},
      departList: [],
      activeName: 'userInfo'
    };
  },
  computed: {},
  mounted() {
    this.getData()
  },
  methods: {
    tabClick(tab, event) {
      this.activeName = tab.name;
    },
    async getData() {
      const res = await DepartApi.listMangerTree()
      this.departList = res.data
      const res1 = await PrinterApi.getPrinterInfo({ id: this.$route.query.id })
      this.dataInfo = res1.data
    },
    formatPrinterState(cellValue) {
      if (cellValue === 0) {
        return '未激活'
      } else if (cellValue === 1) {
        return '已激活'
      } else if (cellValue === 2) {
        return '已注销'
      }
    },
    formatPrinterStates(cellValue) {
      if (cellValue === 0) {
        return ''
      } else if (cellValue === 1) {
        return 'success'
      } else if (cellValue === 2) {
        return 'info'
      }
    },
    formatDepartName(departId) {
      return this.$Utils.filterTreeToArr(this.departList, { departId }, 'departId').map(item => item.departName).join("/")
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/equip/printerManagement' })
    }
  },

}

</script>
<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>
<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
